<!--
 * @Author: your name
 * @Date: 2021-07-29 09:27:43
 * @LastEditTime: 2021-08-03 17:18:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue\12-tab选项卡\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/common.css" />
    <title>Title</title>
  </head>
  <style>
    .tabs {
      margin: 20px;
      border-radius: 5px;
      width: 400px;
      height: 400px;
      border: 1px solid #eee;
    }

    .title li {
      padding: 2px 16px;
      border: 1px solid #eee;
      margin: 0 5px;
      border-radius: 5px;
    }

    .title li.active {
      background-color: orangered;
    }

    .content {
      margin-top: 10px;
    }
  </style>

  <body>
    <div id="app" class="tab">
      <b-tabs :list="cityList">
        <b-tab-item
          >组件之间的内容要显示的话必须在组件中加入插槽slot</b-tab-item
        >
      </b-tabs>
    </div>
    <script>
      // 定义一个选项卡的选项组件
      Vue.component("b-tab-item", {
        template: `
            <div>
                <slot></slot>
            </div>
            `,
      });
      // 定义一个选项卡组件 template后面有个tab `
      Vue.component("b-tabs", {
        props: ["list"],
        template: `
         <div class="tabs"> 
            <ul class="title flex">
                <li
                    @click='activeindex=i' 
                    :class="{active:i===activeindex}" 
                    v-for="(item,i) in cityList"
                >
                {{ item }}
                </li>
            </ul>       
            <ul class="content">
                <slot></slot>
                <li v-show="activeindex===0">
                    <input type="text" value="北京烤鸭">
                </li>
                <li v-show="activeindex===1">
                    <button> 苏州松鼠桂鱼 </button>
                </li>
                <li v-show="activeindex===2">
                    <textarea cols="30" rows="4">杭州西湖醋鱼</textarea>
                </li>
                <li v-show="activeindex===3">
                    <p> 上海熏鱼 </p>
                </li>
            </ul>
         </div>
      `,
        data() {
          return {
            activeindex: 0,
            cityList: ["北京", "上海", "苏州", "杭州"],
          };
        },
      });
      new Vue({
        el: "#app",
        data() {
          return {};
        },
      });
    </script>
  </body>
</html>
